<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
</head>
<div>
    当前用户：<div id="mingzi"></div>
    <hr>
    广播：
    <p id="guangbo" style="border: 1px solid black;height: 20px;width: 100%;white-space:normal"></p>

    <div id="conversationDiv">
        <label>输入消息</label><input type="text" id="input" style="width: 500px" />
        <label>用户名</label><input type="text" id="msgTo" />
        <button id="sendbtn" onclick="sendMsg();">发送聊天</button>
        <button id="qizibtn" onclick="qiziMsg();">发送棋子</button>
        <button id="opbtn" onclick="opMsg();">发送操作</button>
        <p  id="xiaoxi" style="border: 1px solid black;height: 500px;width: 1000px;white-space:normal"></p>
    </div>
</div>
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/sockjs-client/1.5.0/sockjs.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.js"></script>
<script type="text/javascript">
    var username=28;
    $("#mingzi").text(username);
    // 连接 SockJs 的 endpoint 名称为 "/broadcast"
    var socket = new SockJS('http://localhost:8000/gobang');
    // 使用 STOMP 子协议的 WebSocket 客户端
    var stompClient = Stomp.over(socket);
    stompClient.connect({}, function() {
        $("#xiaoxi").text(shijian()+'您连接了http://localhost:8000/gobang！ ' )
        // 通过 stompClient.subscribe 订阅 /topic/messages 目标发送的信息，对应控制器的 SendTo 定义
        //appendMsg(shijian()+username+'您订阅了广播息大厅（/user/chat/user01频道）！ ');
        stompClient.subscribe('/user/chat/'+username, function(msg){
            $("#guangbo").text(shijian()+"收到聊天广播：{"+msg.body+"}       ");
        });
        stompClient.subscribe('/user/chessboard/'+username, function(msg){
            $("#xiaoxi").text(shijian()+"收到棋子广播：{"+msg.body+"}       ");
        });
        stompClient.subscribe('/user/operation/'+username, function(msg){
            $("#xiaoxi").text(shijian()+"收到操作广播：{"+msg.body+"}       ");
        });

    });



    function disconnect() {
        // 断开连接
        if (stompClient != null) {
            stompClient.disconnect();
        }
        alert("Disconnected");
    }

    function sendMsg() {
        // 通过 stompClient.send 向 /hello （服务端）发送信息，对应控制器 @MessageMapping 中的定义
        var sendTo=$("#msgTo")
        stompClient.send("/app/chat",{}, JSON.stringify({
            'content':shijian()+'这是一个测试',
            'ownUID': username,
            'enemyUID': parseInt($("#msgTo").val()),
        }));
        appendMsg("发送了聊天")
    }
    function qiziMsg() {
        // 向服务端发送消息
        // 通过 stompClient.send 向 /hello （服务端）发送信息，对应控制器 @MessageMapping 中的定义
        var sendTo=$("#msgTo")
        stompClient.send("/app/chessboard",{}, JSON.stringify({
            'ownUID': username,
            'enemyUID': parseInt($("#msgTo").val()),
            'RID':9,
            'x':1,
            'y':6
        }));
        appendMsg("发送棋子")
    }
    function opMsg() {
        // 向服务端发送消息
        // 通过 stompClient.send 向 /hello （服务端）发送信息，对应控制器 @MessageMapping 中的定义
        var sendTo=$("#msgTo")
        stompClient.send("/app/operation",{}, JSON.stringify({
            'RID': 9,
            'ownUID': username,
            'enemyUID': parseInt($("#msgTo").val()),
            'operation':5
        }));
        appendMsg("发送操作码")
    }

    function appendMsg(message) {
        // 接收返回的消息
        $("#xiaoxi").append("     {"+shijian()+message+"}       ");
    }
    function shijian() {
        year=new Date().getFullYear();
        month=new Date().getMonth();
        date=new Date().getDate();
        hours=new Date().getHours();
        minutes=new Date().getMinutes();
        seconds=new Date().getSeconds();
        milliseconds=new Date().getMilliseconds();
        return year+"年"+month+"月"+date+"日 "+hours+":"+minutes+":"+seconds+"    ";
    }
</script>
</body>
</html>